<template>
  <div class="box-order">
    <x-header :left-options="{showBack: false}">
      <button-tab class="header-tab">
        <button-tab-item selected @on-item-click="viewModel=0;getPublishOrderList(1)">我的发布</button-tab-item>
        <button-tab-item @on-item-click="viewModel=1;getApplicationOrderList(1)">我的申请</button-tab-item>
      </button-tab>
    </x-header>
    <tab class="order-tabs" v-if="viewModel===0" bar-active-color="#668599" :line-width="1">
      <tab-item :selected="orderStatus === 1" @on-item-click="getPublishOrderList(1)">待成交</tab-item>
      <tab-item @on-item-click="getPublishOrderList(2)">已成交</tab-item>
      <tab-item @on-item-click="getPublishOrderList(4)">已支付</tab-item>
      <tab-item @on-item-click="getPublishOrderList(3)">已删除</tab-item>
      <tab-item @on-item-click="getPublishOrderList(6)">等待收款</tab-item>
    </tab>
    <tab class="order-tabs" v-if="viewModel===1" bar-active-color="#668599" :line-width="1">
      <tab-item :selected="orderStatus === 1" @on-item-click="getApplicationOrderList(1)">待成交</tab-item>
      <tab-item @on-item-click="getApplicationOrderList(2)">已成交</tab-item>
      <tab-item @on-item-click="getApplicationOrderList(4)">已支付</tab-item>
      <tab-item @on-item-click="getApplicationOrderList(5)">被抢单</tab-item>
      <tab-item @on-item-click="getApplicationOrderList(6)">确认收款</tab-item>
      <tab-item @on-item-click="getApplicationOrderList(3)">已删除</tab-item>
    </tab>
    <box class="list-wrapper">
      <div v-show="viewModel===0" v-infinite-scroll="getMorePublishOrderList" infinite-scroll-disabled="busyPub" infinite-scroll-distance="10" infinite-scroll-throttle-delay="1000">
        <box gap="10px">
          <order-card
            v-for="(item, index) in publishOrderList"
            :key="index"
            :order-id="item.MessageId"
            :follow-id="item.FollowId"
            :order-type="viewModel"
            :order-mst="orderStatus"
            @click.native="showOrderInfo(item)">
            <div slot="title">
              <span>{{item.Brief}}</span>
            </div>
            <div slot="footer">
              <span>{{item.State|orderStatus}}</span>
              <span>{{item.DateUpdated|hhmm}}</span>
            </div>
          </order-card>
        </box>
      </div>
      <div v-show="viewModel===1" v-infinite-scroll="getMoreApplicationOrderList" infinite-scroll-disabled="busyApp" infinite-scroll-distance="10" infinite-scroll-throttle-delay="1000">
        <box gap="10px">
          <order-card
            v-for="(item, index) in applicationOrderList"
            :key="index"
            :order-id="item.MessageId"
            :follow-id="item.FollowId"
            :order-type="viewModel"
            :order-mst="orderStatus"
            @click.native="showOrderInfo(item)">
            <div slot="title">{{item.Brief}}</div>
            <div slot="footer">
              <span>{{item.State|orderStatus}}</span>
              <span>{{item.DateUpdated|hhmm}}</span>
            </div>
          </order-card>
        </box>
      </div>
      <div v-if="UserType === '4' && viewModel !== 2">
        <building></building>
      </div>
      <my-load-more></my-load-more>
    </box>
  </div>
</template>

<script>
import {
  XHeader,
  ButtonTab,
  ButtonTabItem,
  Box,
  Tab,
  TabItem
} from 'vux'
import OrderCard from '../../components/OrderCard.vue'
import Building from '../../components/Building.vue'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'boxOrder',
  components: {
    XHeader,
    ButtonTab,
    ButtonTabItem,
    Tab,
    TabItem,
    Box,
    OrderCard,
    Building
  },
  data () {
    return {
      viewModel: 0
    }
  },
  computed: {
    ...mapState({
      loading: state => state.app.loading,
      loadMore: state => state.app.loadMore,
      orderStatus: state => state.order.orderStatus,
      publishOrderList: state => state.order.publishOrderList,
      applicationOrderList: state => state.order.applicationOrderList,
      busyApp: state => state.order.busyApp,
      busyPub: state => state.order.busyPub,
      UserId: state => state.user.UserId,
      UserType: state => state.user.UserType,
      bussList: state => state.order.bussList
    })
  },
  methods: {
    ...mapMutations({
      resetMyOrder: 'order/resetMyOrder',
      resetType: 'order/resetType'
    }),
    ...mapActions({
      getPublishOrderList: 'order/getPublishOrderList',
      getMorePublishOrderList: 'order/getMorePublishOrderList',
      getApplicationOrderList: 'order/getApplicationOrderList',
      getBusinessList: 'order/getBusinessList',
      getMoreApplicationOrderList: 'order/getMoreApplicationOrderList'
    })
  }
}
</script>

<style lang="less">
  .box-order{

  }
</style>
